<template>
  <van-form @submit="onSubmit">
    <!-- 文章标题 -->
    <van-field
      v-model="username"
      name="用户名"
      label="文章标题"
      placeholder="请输入文章内容"
      :rules="[{ required: true, message: '请输入文章内容' }]"
    />
    <!-- 文章分类 -->
    <van-field
      readonly
      clickable
      name="picker"
      :value="value"
      label="文章分类"
      placeholder="请选择文章分类"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>

    <van-field
      readonly
      clickable
      name="picker"
      :value="value2"
      label="文章标签"
      placeholder="请选择文章标签"
      @click="showPicker2 = true"
    />
    <van-popup
      v-model="showPicker2"
      position="bottom"
      close-icon="close"
      :style="{ height: '30%' }"
      closeable
    >
      <div class="tags-popup">
        <h3>请选择标签</h3>
        <van-checkbox-group v-model="checkboxGroup" direction="horizontal">
          <van-checkbox name="1" shape="square">复选框 1</van-checkbox>
          <van-checkbox name="2" shape="square">复选框 2</van-checkbox>
          <van-checkbox name="3" shape="square">复选框 3</van-checkbox>
          <van-checkbox name="4" shape="square">复选框 4</van-checkbox>
        </van-checkbox-group>
      </div>
    </van-popup>
    <van-field name="uploader" label="文件上传">
      <template #input>
        <van-uploader v-model="uploader" />
      </template>
    </van-field>
    <van-field
      v-model="message"
      rows="4"
      autosize
      label="文章正文"
      type="textarea"
      placeholder="请输入正文内容"
    />
    <br /><br />
    <van-row type="flex" justify="space-around">
      <van-button icon="plus" type="primary">发布</van-button>
      <van-button icon="send-gift-o" type="info">存草稿</van-button>
      <van-button icon="revoke" type="danger">重置</van-button>
    </van-row>
  </van-form>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      value2: "",
      columns: ["分类1", "分类2", "分类3", "分类4", "分类5"],
      showPicker: false,
      showPicker2: false,
      checkboxGroup: [],
      message: "",
    };
  },
  methods: {
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
  },
};
</script>

<style scoped lang="less">
.tags-popup {
  padding: 0 20px;
  h3 {
    font-size: 30px;
    font-weight: normal;
    line-height: 100px;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
  }
}
</style>